<template>
  <div class="app-container">
    <div class="">
      <div class="tableBox">
        <el-form
          ref="elFormTop"
          size="medium"
          label-width="140px"
          :class="securityConfs.securityMethod == 1?'maxHidden':''"
          @submit.native.prevent
        >
          <el-form-item label="配置保障服务">
            <div class="textLeft">
              <el-radio-group
                v-model="securityConfs.securityMethod"
                size="medium"
                @change="changeSecurityMethodFn"
              >

                <el-radio
                  v-for="(item, index) in group_security_method_options"
                  :key="index"
                  :label="item.dictValue"
                >{{ item.dictLabel }}</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <!-- <span v-show="securityConfs.securityMethod == 1">
					 -->

          <!-- ip 漂移模式 2  ha 代理模式1-->
          <div v-for="(row,i) in securityServiceList" :key="i" class="boxBorder">

            <el-form ref="elForm" :rules="rules" :model="row" size="medium" label-width="140px">
              <el-row v-if="securityConfs.securityMethod == 1">
                <el-col :span="11">
                  <el-form-item label="代理节点" prop="hessProxyIp">
                    <el-select
                      v-model="row.hessProxyIp"
                      class="w100"
                      placeholder="请选择"
                      filterable
                      value-key="id"
                      @change="changeFessProxyIpFn"
                    >
                      <el-option
                        v-for="item in nodeList"
                        v-show="item.nodeType == 3"
                        :key="item.id"
                        :label="item.nodeIp + '   |    ' + item.nodeName"
                        :value="item.nodeIp"
                        :class="item.nodeStatus == '1'?'successColor':'dangerColor'"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <span v-show="!ProxyNodeNum" class="noNode">提示：还未配置代理节点！</span>
                </el-col>
                <el-col :span="2" />
              </el-row>

              <span class="width130">
                <el-row>
                  <el-col :span="11">
                    <el-form-item label="主要节点网卡名称" prop="importantDisplayName">
                      <el-input
                        v-model="row.importantDisplayName"
                        maxlength="50"
                        clearable
                        placeholder="主要节点网卡名称"
                        :style="{ width: '100%' }"
                      >
                        <el-select
                          slot="prepend"
                          v-model="row.importantDisplayName"
                          value-key="nodeNetName"
                          clearable
                          placeholder="请选择网卡"
                        >
                          <el-option
                            v-for="(item,index) in impDisplayNameList"
                            :key="index"
                            :value="item.nodeNetName"
                            :disabled="item=='加载中，请稍后...'?true:false"
                          >
                            <el-tooltip class="item" effect="dark" placement="top">
                              <div slot="content">
                                <p>网卡IP:</p>
                                <div
                                  v-for="(items,index) in item.nodeNetIp"
                                  :key="index"
                                  style="margin:4px 6px;"
                                >
                                  {{ items }}
                                </div>
                              </div>
                              <span style="float: left">{{ item.nodeNetName }}</span>
                            </el-tooltip>
                          </el-option>
                        </el-select>
                        <el-button
                          slot="append"
                          class="pointer"
                          @click="getDisplayName(importantNodeId,'importantNodeId')"
                        >刷新
                        </el-button>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="securityConfs.securityMethod == 1" :span="11">
                    <el-form-item label="代理节点网卡名称" prop="proxyDisplayName">
                      <el-input
                        v-model.trim="row.proxyDisplayName"
                        maxlength="50"
                        clearable
                        placeholder="保障节点网卡名称"
                        :style="{ width: '100%' }"
                      >
                        <el-select
                          slot="prepend"
                          v-model="row.proxyDisplayName"
                          value-key="nodeNetName"
                          clearable
                          placeholder="请选择网卡"
                        >
                          <el-option
                            v-for="(item,index) in proxyDisplayNameList"
                            :key="index"
                            :value="item.nodeNetName"
                            :disabled="item=='加载中，请稍后...'?true:false"
                          >
                            <span style="float: left">{{ item.nodeNetName }}</span>
                          </el-option>
                        </el-select>
                        <el-button
                          slot="append"
                          class="pointer"
                          @click="getDisplayName(proxyId,'proxyId')"
                        >刷新</el-button>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="securityConfs.securityMethod == 2" :span="11">
                    <el-form-item label="保障节点网卡名称" prop="guaranteeDisplayName">
                      <el-input
                        v-model.trim="row.guaranteeDisplayName"
                        maxlength="50"
                        clearable
                        placeholder="保障节点网卡名称"
                        :style="{ width: '100%' }"
                      >
                        <el-select
                          slot="prepend"
                          v-model="row.guaranteeDisplayName"
                          value-key="nodeNetName"
                          clearable
                          placeholder="请选择网卡"
                        >
                          <el-option
                            v-for="(item,index) in guaDisplayNameList"
                            :key="index"
                            :value="item.nodeNetName"
                            :disabled="item=='加载中，请稍后...'?true:false"
                          >
                            <el-tooltip class="item" effect="dark" placement="top">
                              <div slot="content">
                                <p>网卡IP:</p>
                                <div
                                  v-for="(items,index) in item.nodeNetIp"
                                  :key="index"
                                  style="margin:4px 6px;"
                                >
                                  {{ items }}
                                </div>
                              </div>
                              <span style="float: left">{{ item.nodeNetName }}</span>
                            </el-tooltip>
                          </el-option>
                        </el-select>
                        <el-button
                          slot="append"
                          class="pointer"
                          @click="getDisplayName(securityNodeId,'securityNodeId')"
                        >刷新
                        </el-button>
                      </el-input>

                    </el-form-item>
                  </el-col>
                  <el-col :span="2">
                    <span v-show="securityServiceList.length > 1" class="floatRight">
                      <i
                        class="el-icon-remove-outline removeBtn"
                        @click="
                          removeServiceList(i)
                        "
                      />
                    </span>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="14">
                    <div v-for="(items, index) in row.vipList" :key="index">
                      <el-form
                        ref="elFormIp"
                        :rules="rulesIp"
                        :model="items"
                        size="medium"
                        label-width="140px"
                      >
                        <el-form-item :label="index<1?'服务IP':''" prop="value">
                          <span class="inlineBlock">
                            <el-col :span="14">
                              <!-- 这个input 可以阻止 回车 刷新页面 -->
                              <input
                                v-show="false"
                                v-model.trim="items.value"
                                type="text"
                              >
                              <el-input
                                v-model.trim="items.value"
                                placeholder="请输入服务IP"
                                class="inputBox"
                              />

                            </el-col>
                            <el-col :span="6">
                              <!-- v-show="index != row.vipList.length - 1" -->

                              <el-button
                                class="letAddBtn"
                                size="mini"
                                round
                                @click="pingIP(items.value)"
                              >IP占用检测</el-button>
                            </el-col>
                            <el-col :span="2">
                              <!-- v-show="index != row.vipList.length - 1" -->
                              <i
                                v-show="row.vipList.length > 1"
                                class="el-icon-remove-outline removeBtn"
                                @click="
                                  removePraForm(index, i)
                                "
                              />
                            </el-col>
                            <el-col v-show="index == row.vipList.length - 1" :span="2">
                              <el-button
                                v-show="securityConfs.securityMethod == 2"
                                class="letAddBtn"
                                type="primary"
                                icon="el-icon-plus"
                                size="mini"
                                @click="serviceAdd(i)"
                              >添加</el-button>
                            </el-col>
                          </span>
                        </el-form-item>
                      </el-form>
                    </div>

                  </el-col>
                  <el-col :span="10">
                    <!-- <el-form-item label="代理端口">
											<el-input-number v-model="row.hessProxyPort" controls-position="right" :precision="0" :min="1" :max="100000"></el-input-number>
										</el-form-item> -->
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="掩码" prop="subnetMasks">
                      <el-input
                        v-model.trim="row.subnetMasks"
                        maxlength="15"
                        show-word-limit
                        clearable
                        placeholder="请输入掩码地址 例如:255.255.0.0"
                        :style="{ width: '100%' }"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="网关" prop="ipv4Gateway">
                      <el-input
                        v-model.trim="row.ipv4Gateway"
                        maxlength="15"
                        show-word-limit
                        clearable
                        placeholder="请输入网关地址 例如:192.168.1.1"
                        :style="{ width: '100%' }"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <!-- <el-col :span="12">
										<el-form-item label="DNS" prop="dnsServers">
											<el-input v-model.trim="row.dnsServers" maxlength="15" show-word-limit clearable placeholder="请输入DNS地址 例如:114.114.114.114"
											 :style="{ width: '100%' }"></el-input>
										</el-form-item>
									</el-col> -->
                  <el-col :span="12">
                    <el-form-item label="VIP切换间隔(秒)" class="textLeft">

                      <el-input-number v-model="row.vipCheckInterval" :precision="0" :min="0" />

                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col v-show="isBingo" :span="12">
                    <el-form-item label="代理服务IP">
                      <el-input
                        v-model.trim="row.hessProxyIp"
                        maxlength="15"
                        show-word-limit
                        clearable
                        placeholder="代理服务IP"
                        :style="{ width: '100%' }"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col v-show="isBingo" :span="12">
                    <el-form-item label="代理服务端口" class="textLeft">
                      <el-input-number
                        v-model="row.hessProxyPort"
                        controls-position="right"
                        :precision="0"
                        :min="1"
                        :max="100000"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row v-show="securityConfs.securityMethod == 1">
                  <el-col :span="24">
                    <el-form-item label="转发规则" class="textLeft">
                      <el-table :data="row.forwardRules" border style="width: 100%">
                        <el-table-column prop="accessPort" label="访问端口">
                          <template slot-scope="scope">
                            <el-input-number
                              v-model="scope.row.accessPort"
                              controls-position="right"
                              :precision="0"
                              :min="1"
                              :max="100000"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column prop="mappingPort" label="映射端口">
                          <template slot-scope="scope">
                            <el-input-number
                              v-model="scope.row.mappingPort"
                              controls-position="right"
                              :precision="0"
                              :min="1"
                              :max="100000"
                            />
                          </template>
                        </el-table-column>
                        <el-table-column prop="agreement" label="通信协议">
                          <template slot-scope="scope">
                            <el-select
                              v-model="scope.row.agreement"
                              clearable
                              placeholder="请选择"
                            >
                              <el-option
                                v-for="item in agreementOptions"
                                :key="item"
                                :label="item"
                                :value="item"
                              />
                            </el-select>
                          </template>
                        </el-table-column>
                        <el-table-column align="right" width="100">
                          <template slot="header" slot-scope="scope">
                            <el-button
                              type="primary"
                              icon="el-icon-plus"
                              size="mini"
                              @click="addForwardRulesFn"
                            >添加</el-button>
                          </template>
                          <template slot-scope="scope">
                            <el-button
                              v-show="row.forwardRules.length > 1"
                              size="mini"
                              type="danger"
                              @click="handleDelete(scope.$index, scope.row)"
                            >删除
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-form-item>
                  </el-col>
                </el-row>
              </span>
            </el-form>
          </div>
          <div v-show="securityConfs.securityMethod == 2" class="textRight">
            <el-button
              class="letAddBtn margin10"
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="securityServiceListAdd()"
            >新增</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <div class="textCenter">
      <el-button size="small" type="primary" plain @click="backPage">上一步</el-button>
      <el-button size="small" type="primary" @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
import global_ from '@/utils/Global'

import {
  nodeNetNameList
} from '@/api/db/group'

import {
  listHessNode
} from '@/api/console/hessNode'
import {
  httpCodePing
} from '@/api/console/hessNode'
export default {
  props: {
    active: Number,
    formDatas: Object
  },
  data() {
    return {
      helpList: [{
        'title': '1.保障设置页面指引',
        'helpMsg': '保障设置页面指引'
      },
      {
        'title': '2.如何选择保障服务类型',
        'helpMsg': '如何选择保障服务类型'
      }
      ],
      subFormDatas: {},
      nodeList: [],
      // 是否通过页面的判断逻辑
      isTraverse: false,
      radio: '',
      securityServiceList: [],
      agreementOptions: [
        'tcp', 'udp'
      ],
      // 网卡名称列表
      impDisplayNameList: [{
        'nodeNetName': '加载中，请稍后...'
      }],
      guaDisplayNameList: [{
        'nodeNetName': '加载中，请稍后...'
      }],
      proxyDisplayNameList: [{
        'nodeNetName': '加载中，请稍后...'
      }],
      securityConfs: {
        'securityMethod': '2', // 默认IP漂移方式
        'vip': null,
        'vipList': [],
        'displayName': '',
        'ipv4Gateway': '192.168.1.1',
        'dnsServers': '',
        'subnetMasks': '255.255.0.0',
        'vipCheckInterval': 5,
        hessProxyIp: '',
        proxyDisplayName: '',
        forwardRules: [{
          'accessPort': 3306, // 外部访问端口
          'mappingPort': 3306, // 映射端口
          'agreement': 'tcp' // 通信协议tcp、udp
        }]
      },
      rulesIp: {
        value: [{
          required: true,
          message: '请输入服务IP地址',
          trigger: 'blur'
        }, {
          pattern: global_.IpRegex,
          message: global_.IpRegex_msg,
          trigger: 'blur'
        }]
      },
      rules: {
        hessProxyIp: [{
          required: true,
          message: '请选择代理节点',
          trigger: 'blur'
        }],
        importantDisplayName: [{
          required: true,
          message: '请输入主要节点网卡名称',
          trigger: 'blur'
        }],
        proxyDisplayName: [{
          required: true,
          message: '请输入代理节点网卡名称',
          trigger: 'blur'
        }],
        guaranteeDisplayName: [{
          required: true,
          message: '请输入保障节点网卡名称',
          trigger: 'blur'
        }],
        ipv4Gateway: [{
          required: true,
          message: '请输入网关地址',
          trigger: 'blur'
        }, {
          pattern: global_.IpRegex,
          message: '请输入合法_有效的 网关地址',
          trigger: 'blur'
        }],
        subnetMasks: [{
          required: true,
          message: '请输入掩码地址',
          trigger: 'blur'
        }, {
          pattern: global_.IpRegex,
          message: '请输入合法_有效的 掩码地址',
          trigger: 'blur'
        }]
      },
      rulesHa: {
        haIp: [{
          required: true,
          message: '请输入代理节点地址',
          trigger: 'blur'
        }],
        haPort: [{
          required: true,
          message: '请输入代理端口',
          trigger: 'blur'
        }, {
          pattern: global_.PortRegex,
          message: '请输入合法_有效的 代理端口',
          trigger: 'blur'
        }]

      },
      // 保障分组-保障方式
      group_security_method_options: [],
      isBingo: false,
      proxyId: '',
      importantNodeId: '',
      securityNodeId: '',
      // 传输网卡信息
      showDisplay: false,
      importantDisplay: '',
      impDisplayListOptions: [],
      proxyDisplay: '',
      proDisplayListOptions: []

    }
  },
  computed: {
    ProxyNodeNum: {
      get() {
        var num = 0
        this.nodeList.map((item) => {
          if (item.nodeType == 3) {
            num++
          }
        })
        // 监测节点组是否存在 代理节点
        return !!num
      }
    }
  },
  created() {
    this.getDictsFn()

    if (this.formDatas.id) {
      this.initData()
    } else {
      this.securityServiceListAdd()
    }

    this.getNodeList()
  },
  methods: {
    // 检查IP 是否被占用，如果被占用，检测会很快有结果
    pingIP(ip) {
      if (!ip) {
        this.$message({
          message: 'IP地址 不能为空 ',
          type: 'error'
        })
        return false
      }

      httpCodePing({
        'ip': ip,
        'timeout': '3000'
      }).then(response => {
        if (response.data.status) {
          this.$message({
            message: 'IP地址:' + ip + ' 已被占用',
            type: 'error'
          })
        } else {
          this.$message({
            message: 'IP地址 :' + ip + ' 可以使用',
            type: 'success'
          })
        }
      }).catch((err) => {

      })
    },
    // 初始化数据，如果时编辑则回显数据
    initData() {
      var vue = this
      console.log('initData:', this.formDatas)
      const securityConfs = {}

      if (!this.formDatas.securityConfs.length) {
        // 兼容旧配置
        securityConfs.id = this.formDatas.securityConfs.id
        securityConfs.securityMethod = '' + this.formDatas.securityConfs.securityMethod
        securityConfs.checkInterval = '' + this.formDatas.securityConfs.checkInterval
        // this.securityConfs.vip = this.formDatas.securityConfs.vip;
        securityConfs.vipList = []
        securityConfs.vipList.push({
          'value': this.formDatas.securityConfs.vip
        })

        securityConfs.importantDisplayName = ''
        securityConfs.guaranteeDisplayName = this.formDatas.securityConfs.displayName
        securityConfs.ipv4Gateway = this.formDatas.securityConfs.ipv4Gateway
        securityConfs.dnsServers = this.formDatas.securityConfs.dnsServers
        securityConfs.subnetMasks = this.formDatas.securityConfs.subnetMasks
        securityConfs.vipCheckInterval = this.formDatas.securityConfs.vipCheckInterval
        securityConfs.forwardRules = []

        this.securityServiceList.push(securityConfs)
      } else {
        const securityConfs = {}
        this.formDatas.securityConfs.map((item) => {
          securityConfs.id = item.id
          securityConfs.securityMethod = '' + item.securityMethod
          // ip 漂移和代理 区分
          vue.securityConfs.securityMethod = '' + item.securityMethod
          securityConfs.checkInterval = '' + item.checkInterval

          // 网卡名称赋值
          securityConfs.importantDisplayName = item.importantDisplayName
          securityConfs.guaranteeDisplayName = item.guaranteeDisplayName
          securityConfs.proxyDisplayName = item.proxyDisplayName

          securityConfs.ipv4Gateway = item.ipv4Gateway
          securityConfs.dnsServers = item.dnsServers
          securityConfs.subnetMasks = item.subnetMasks
          securityConfs.vipCheckInterval = item.vipCheckInterval
          securityConfs.hessProxyIp = item.hessProxyIp
          securityConfs.hessProxyPort = item.hessProxyPort

          vue.changeFessProxyIpFn(item.hessProxyIp)

          securityConfs.forwardRules = item.forwardRules ? item.forwardRules : []
          securityConfs.vipList = []
          if (item.vip) {
            item.vip.split(',').map((items) => {
              securityConfs.vipList.push({
                'value': items
              })
            })
          } else {
            securityConfs.vipList.push({
              'value': ''
            })
          }

          vue.securityServiceList.push(JSON.parse(JSON.stringify(securityConfs)))
        })
      }
    },
    // 切换
    handleChange() {

    },
    // 获取节点数据 完整所有数据
    getNodeList() {
      listHessNode({
        'pageNum': 1,
        'pageSize': 20000
      }).then(response => {
        var data = response.rows.sort((a, b) => {
          return b.nodeStatus - a.nodeStatus
        })
        this.nodeList = data
      })
    },
    // 添加 所网卡配置
    securityServiceListAdd() {
      const securityConfs = {}

      securityConfs.securityMethod = '2'
      securityConfs.checkInterval = ''

      securityConfs.importantDisplayName = ''
      securityConfs.guaranteeDisplayName = ''
      securityConfs.ipv4Gateway = '192.168.1.1'
      securityConfs.dnsServers = ''
      securityConfs.subnetMasks = '255.255.0.0'
      securityConfs.vipCheckInterval = 5

      securityConfs.vipList = []
      securityConfs.forwardRules = []

      securityConfs.vipList.push({
        'value': ''
      })
      this.securityServiceList.push(securityConfs)
    },
    // 添加参数
    serviceAdd(i) {
      // console.log(list)
      this.$data.securityServiceList[i].vipList.push({
        value: ''
      })
    },
    // 添加代理 转发规则
    addForwardRulesFn() {
      this.$data.securityServiceList[0].forwardRules.push({
        'accessPort': '', // 外部访问端口
        'mappingPort': '', // 映射端口
        'agreement': 'tcp' // 通信协议tcp、udp
      })
    },
    // 删除参数
    removePraForm(index, i) {
      if (this.$data.securityServiceList[i].vipList.length == 2 && this.$data.securityServiceList[i].vipList[1]
        .value ==
					'') {
        this.$data.securityServiceList[i].vipList[1] = this.$data.securityServiceList[i].vipList[0]
      }

      if (this.$data.securityServiceList[i].vipList.length == 1) {
        return false
      }

      this.$data.securityServiceList[i].vipList.splice(index, 1)
    },
    // 数组删出
    removeServiceList(i) {
      this.$data.securityServiceList.splice(i, 1)
    },
    getDictsFn() {
      // 保障分组-保障方式
      this.getDicts('group_security_method').then(response => {
        this.group_security_method_options = response.data
      })
    },
    // 获取代理ip
    changeFessProxyIpFn(res) {
      this.nodeList.map((item) => {
        if (item.nodeIp == res) {
          this.$data.securityServiceList[0].hessProxyPort = item.haPort
          this.getDisplayName(item.id, 'proxyId')
        }
      })
    },
    // 点击切换保障服务类型
    changeSecurityMethodFn(res) {
      var vue = this
      if (res == 1) {
        if (this.$data.securityServiceList[0].forwardRules.length < 1) {
          this.$data.securityServiceList[0].forwardRules.push({
            'accessPort': '', // 外部访问端口
            'mappingPort': '', // 映射端口
            'agreement': 'tcp' // 通信协议tcp、udp
          })
        }
      }

      if (res == 1 && vue.$data.securityServiceList.length > 1) {
        vue.$confirm('IP代理模式下只支持一项配置, 是否保留第一项?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var obj = JSON.parse(JSON.stringify(vue.$data.securityServiceList[0]))
          vue.$data.securityServiceList = []
          vue.$data.securityServiceList.push(obj)
          vue.eheckIp(res)
        }).catch(() => {

        })
        return false
      }
      vue.eheckIp(res)
    },
    // 检查IP 数量
    eheckIp(res) {
      if (res == 1 && this.$data.securityServiceList[0].vipList.length > 1) {
        this.$confirm('IP代理模式下只支持一项  "服务IP"  配置, 是否保留第一项?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var obj = JSON.parse(JSON.stringify(this.$data.securityServiceList[0].vipList[0]))
          this.$data.securityServiceList[0].vipList = []
          this.$data.securityServiceList[0].vipList.push(obj)
        }).catch(() => {

        })
      }
    },
    // 获取网卡名称
    getDisplayName(NodeId, type) {
      var vue = this
      // 				vue.impDisplayNameList = ['加载中，请稍后...'];
      // 				vue.guaDisplayNameList = ['加载中，请稍后...'];
      // 				vue.proxyDisplayNameList = ['加载中，请稍后...'];
      nodeNetNameList({
        'id': NodeId
      }).then(response => {
        if (!response.data) {
          response.data = []
        }

        if (typeof response.data === 'object' && response.data.constructor == Array) {
          if (type == 'importantNodeId') {
            vue.importantNodeId = NodeId
            vue.impDisplayNameList = response.data
          } else if (type == 'securityNodeId') {
            vue.securityNodeId = NodeId
            vue.guaDisplayNameList = response.data
          } else if (type == 'proxyId') {
            vue.proxyId = NodeId
            vue.proxyDisplayNameList = response.data
          }

          this.handleData(type, response.data)
        }
      }).catch((err) => {

      })
    },
    // 将网卡数据处理成 连级选择器数据
    handleData(type, dataList) {
      var arr = []

      dataList.map((item) => {
        const obj = {}

        obj.label = item.nodeNetName
        obj.value = item.nodeNetName
        obj.children = []
        item.nodeNetIp.map((item2) => {
          const obj2 = {}
          obj2.label = item2
          obj2.value = item2
          obj.children.push(obj2)
        })

        arr.push(obj)
      })

      console.log(arr)
      if (type == 'importantNodeId') {
        this.impDisplayListOptions = arr
      } else if (type == 'securityNodeId') {
        this.proDisplayListOptions = arr
      }
    },
    // 上一步
    backPage() {
      this.$emit('changeActive', 1)
    },
    // 下一步
    next() {
      var vue = this
      if (vue.securityConfs.securityMethod == '1') {
        const arr = this.securityServiceList[0]
        arr.securityMethod = '1'
        this.securityServiceList = []
        this.securityServiceList.push(arr)
      } else {
        // 没有生效区域
        for (let i = 0, len = this.securityServiceList.length; i < len; i++) {
          this.securityServiceList[i].securityMethod = '2'
        }
      }

      var validAll = true
      // 步骤3 验证规则
      vue.$refs.elForm.map((item) => {
        item.validate(valid => {
          // console.log('所有保障表单规则：',valid)
          if (!valid) {
            validAll = false
          } else {
            vue.$refs.elFormIp.map((item) => {
              item.validate(validTow => {
                // console.log('所有服务IP验证规则：',validTow)
                if (!validTow) {
                  validAll = false
                }
              })
            })
          }
        })
      })

      // 只要有一个验证规则没有通过就要中断
      // console.log('所有验证规则3：', validAll)
      if (validAll) {
        this.$emit('changeActive', 5, this.securityServiceList)
      }

      return true
    },
    handleDelete(i) {
      this.$data.securityServiceList[0].forwardRules.splice(i, 1)
    }
  }
}
</script>
<style>
	.tableBox .el-input-group__append {
		cursor: pointer;
	}

	.width130 .el-select .el-input {
		width: 100px;
	}
</style>
<style lang="scss" scoped>
	.app-container {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.maxHidden {
		min-height: 385px;
	}

	.floatRight {
		float: right;
	}

	.tableBox {
		width: 1000px;
		margin: 0 auto;
		border: 1px solid #dbdbdb;
		padding: 10px;
		margin-bottom: 20px;
		border-radius: 4px;
	}

	.inputBox {
		padding-bottom: 6px;
	}

	.textLeft {
		text-align: left;
	}

	.boxBorder {
		border: 1px solid #f0f0f0;
		border-radius: 4px;
		padding: 10px;
		margin-bottom: 10px;
	}

	.inputBox {
		width: calc(100% - 10px);
		margin-right: 5px;
	}

	.removeBtn {
		margin-left: 0px;
		height: 25px;
		width: 25px;
		color: #f44336;
		font-size: 24px;
		cursor: pointer;
		margin-top: 8px;
	}

	.textRight {
		text-align: right;
	}

	.w100 {
		width: 100%;
	}

	.noNode {
		display: inline-block;
		margin: 6px;
		color: gray;
	}

  .textCenter{
    text-align: center;
  }
</style>
